import React from 'react'

interface UserAvatarProps {
  src?: string
  size?: number
  isAnonymous?: boolean
  className?: string
}

// 用户头像组件
const UserAvatar: React.FC<UserAvatarProps> = ({ 
  src, 
  size = 36, 
  isAnonymous = false,
  className = ''
}) => {
  const defaultAvatar = isAnonymous ? '👤' : '👨‍⚕️'
  
  if (src) {
    return (
      <div className={className}>
        <img 
          src={src} 
          style={{ 
            width: size, 
            height: size, 
            borderRadius: size / 2,
            objectFit: 'cover'
          }} 
          onError={(e) => {
            // 如果图片加载失败，显示默认头像
            const target = e.target as HTMLImageElement
            target.style.display = 'none'
            const fallback = target.nextElementSibling as HTMLElement
            if (fallback) {
              fallback.style.display = 'flex'
            }
          }}
        />
        {/* 备用默认头像 */}
        <div style={{
          width: size,
          height: size,
          borderRadius: size / 2,
          backgroundColor: isAnonymous ? '#e3f2fd' : '#f0f0f0',
          display: 'none',
          alignItems: 'center',
          justifyContent: 'center',
          fontSize: size * 0.4,
          color: isAnonymous ? '#1976d2' : '#666'
        }}>
          {defaultAvatar}
        </div>
      </div>
    )
  }
  
  return (
    <div 
      className={className}
      style={{
        width: size,
        height: size,
        borderRadius: size / 2,
        backgroundColor: isAnonymous ? '#e3f2fd' : '#f0f0f0',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: size * 0.4,
        color: isAnonymous ? '#1976d2' : '#666'
      }}
    >
      {defaultAvatar}
    </div>
  )
}

export default UserAvatar
